<template>
	<div class="sidebar">
		<div class="title">事业部</div>
		<div
			class="item"
			v-for="(item, index) in business"
			:key="index"
			@click="choice(item, index)"
			:class="activeIndex == index ? 'active' : ''"
		>
			{{ item.biz_name }}
		</div>
	</div>
</template>
<script>
export default {
	props: {
		business: {
			type: Array,
			default: () => {
				[];
			}
		}
	},
	data() {
		return {
			activeIndex: 0
		};
	},
	mounted() {
		if (this.business.length > 0) {
			this.choice(this.business[0], 0);
		}
	},
	methods: {
		choice(item, index) {
			this.$emit("changeBiz", item);
			this.activeIndex = index;
		}
	}
};
</script>
<style lang="scss" scoped>
.active {
	border-color: #156DFF !important;
}
.sidebar {
	background: #fff;
	padding: 10px;
	padding-top: 0;
	height: 100%;
	border-right: 1px solid #ebeef5;
	overflow: auto;
	width: 230px;
	box-sizing: border-box;
	.title {
		font-size: 18px;
		margin-bottom: 10px;
	}
	.item {
		border-radius: 5px;
		background: rgb(249, 250, 252);
		text-align: center;
		height: 44px;
		font-size: 14px;
		line-height: 44px;
		margin-bottom: 10px;
		border: 1px solid rgb(249, 250, 252);
		box-sizing: border-box;
	}
}
</style>
